<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理采集信息数据修改页</title>

    <!--全局样式-->
    <style type="text/css">
        body{
            background-image: url(http://47.105.208.60:8080/wechat-api/images/loginbg.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        form#index {
            margin-left:auto;
            margin-right:auto;
            max-width: 500px;
            background: #F7F7F7;
            opacity:0.95;
            padding: 25px 15px 25px 10px;
            font: 12px Georgia, "Times New Roman", Times, serif;
            color: #888;
            text-shadow: 1px 1px 1px #FFF;
            border:1px solid #E4E4E4;
            text-align:center;
        }
        form#index h3 {
            font-size: 25px;
            padding: 0px 0px 10px 40px;
            display: block;
            border-bottom:1px solid #E4E4E4;
            margin: -10px -15px 30px -10px;;
            color: #888;
            text-align:center;
        }
        form#index label {
            display: block;
            margin: 0px;
        }
        form#index label>span {
            float: left;
            width: 20%;
            text-align: right;
            padding-right: 10px;
            margin-top: 10px;
            color: #888;
        }
        form#index input[type="text"], form#index input[type="number"] {
            border: 1px solid #DADADA;
            color: #888;
            height: 30px;
            margin-bottom: 16px;
            margin-right: 6px;
            margin-top: 2px;
            outline: 0 none;
            padding: 3px 3px 3px 5px;
            width: 70%;
            font-size: 12px;
            line-height:15px;
            box-shadow: inset 0px 1px 4px #ECECEC;
            -moz-box-shadow: inset 0px 1px 4px #ECECEC;
            -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
        }
        form#index .button {
            background: #E27575;
            border: none;
            padding: 10px 25px 10px 25px;
            color: #FFF;
            box-shadow: 1px 1px 5px #B6B6B6;
            border-radius: 3px;
            text-shadow: 1px 1px 1px #9E3F3F;
            cursor: pointer;
        }
        .isAll{
            position: relative;
            z-index: 1;
            display: flex;
            align-content: center;
            justify-content: space-between;
            width:94%;
            margin:0 3%;
        }
        .divForm{
            position: absolute;
            z-index: 2;
            width:95%;
        }
        .divLook{
            position: absolute;
            z-index: 3;
            height:230px;
            width:200px;
            background-color: #FFFFFF;
            margin-top: 20%;
            margin-left:75%;
            /*opacity: 0.5;*/
            border-radius: 10px;
        }
        .divtitle{
            hieght:23px;
            font-size: 16px;
            /*align-items: center;*/
            align-content: center;
            justify-content: center;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            overflow: hidden;
            border-bottom: 1px #dedede solid;
            text-align:center;
            margin:4px;
            color: #1c2438;;
        }
        .cont{
            font-size: 12px;
            height:32px;
            width: 95%;
            margin: 0 4%;
            margin-top: 2px;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            padding-right: 5pt;
            overflow: hidden;
            color: #cccaca;
        }
        .contTitle{
            font-size: 14px;
            color: #cccaca;
            margin: 2px 3px;
        }
        .conPhoneType{
            hieght:19px;
        }
        .conPhone{
            font-size: 12px;
            height: 16px;
            width: 95%;
            margin: 0 4%;
            margin-top: 4px;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            padding-right: 5pt;
            overflow: hidden;
            color: #cccaca;
        }
        .conSummary{
            font-size: 12px;
            height: 47px;
            width: 95%;
            margin: 0 4%;
            margin-top: 4px;
            word-break: break-all;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            padding-right: 5pt;
            overflow: hidden;
            color: #cccaca;
        }
        .divFoot{
            border-top: 1px #dedede solid;
            height: 20px;
            font-size: 14px;
            display:flex;
            align-content: center;
            justify-content: space-between;
            margin-top: 5px;
        }
        .divLeft{
            width: 50%;
            color: #666;
            text-align: center;
            border-right: 1px solid #dedede;
            padding-top: 2px;
            /*color: #cccccc;*/
        }
        .divRight{
            width: 50%;
            color: #0095ec;
            text-align: center;
            padding-top: 2px;
        }
    </style>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>

    <script>

        function getQueryParameter(id){
            console.log(id);
            var s = location.href;
            s = s.replace("?","?&").split("&");//这样可以保证第一个参数也能分出来
            var re = "";
            for(i=1;i<s.length;i++)
                if(s[i].indexOf(id+"=")==0)
                    re = s[i].replace(id+"=","");//取代前面的参数名，只剩下参数值
            return re;
        }

        function yulan1(){
            var lookOrNo = document.getElementById("look").value;
            var title = document.getElementById("name").value;
            title == ""?title="此处是标题":title;//地点名称
            var address = document.getElementById("address").value;//详细地址
            var phonetype = document.getElementById("phonetype").value;//电话类型
            phonetype == ""?phonetype="此处是电话类型":phonetype;//地点名称
            var userphone = document.getElementById("userphone").value;//电话
            var summary = document.getElementById("summary").value;//简介

            document.getElementById("title").textContent = title;
            document.getElementById("conAddr").textContent = address;
            document.getElementById("conPhoneType").textContent = phonetype+":";
            document.getElementById("conPhone").textContent = userphone;
            document.getElementById("conSummary").textContent = summary;
            if(lookOrNo == "预览"){
                document.getElementById("divLook").style.display = ""
                document.getElementById("look").value = "取消预览"
            }else{
                document.getElementById("divLook").style.display = "none"
                document.getElementById("look").value = "预览"
            }

        }

        function onLoadByPage(){
            var id = "#(id ??)"; //getQueryParameter('id')//获取id
            //后台查询数据
            var url="http://47.105.208.60:8080/wechat-api/api/findAtlasById";

            //var url="/api/findAtlasById";
            var objData = [
                { name: 'id', value: id}
            ];//post方式传送的数据

            $.ajax({
                url: url,
                //JSON.stringify(objData)
                data: objData,
                dataType: 'json',
                type: 'POST',
                success : function(data) {
                    console.log(data)

                    document.getElementById("id").value=data.id;
                    document.getElementById("num").value=data.num;
                    document.getElementById("name").value=data.title;
                    document.getElementById("address").value=data.address;
                    document.getElementById("addressType").value=data.addresstype;

                    console.log(data.etype);
                    $('input:checkbox').each(function (index, domEle) {
                        console.log(domEle)
                        var inputclients = domEle.value;
                        var clients = data.etype.split(",");
                        for (var j = 0; j < clients.length; j++) {
                            if (inputclients == clients[j]) {
                                domEle.checked = true;
                            }
                        }
                    });
                  /*  console.log(data.etype+"===");
                    for(var i=0;i<data.etype.length;i++){
                        $("input[name='etype']").each(function(obj,item) {
//                        console.log(obj+"-----");
//                        console.log(item+"+++");
                            if (item.value == data.etype) {
                                $(item).prop("checked" , true)
                            }
                        });
                    }*/

                    document.getElementById("longitude").value=data.longitude;
                    document.getElementById("latitude").value=data.latitude;
                    document.getElementById("summary").value=data.summary;
                    document.getElementById("distinctive").value=data.distinctive;
                    document.getElementById("username").value=data.username;
                    document.getElementById("phonetype").value=data.phonetype;
                    document.getElementById("userphone").value=data.userphone;
                    document.getElementById("townsname").value=data.townsname;
                    document.getElementById("townsphone").value=data.townsphone;
                    document.getElementById("report").value=data.report;
                    document.getElementById("unit").value=data.unit;

                },error: function(err){
                    console.log("----------")
                    console.log(err)
                }
            });

        }
        onLoadByPage();

        //修改数据
        function baocun1() {
            var obj = document.getElementsByName("etype");

            var val = [];

            for(var k=0;k<obj.length;k++){
                if(obj[k].checked){
                    val.push(obj[k].value)

                }
            }
            console.log(val)

            var eee = val.join(',');

            var array ={
                id:document.getElementById("id").value,
                num:document.getElementById("num").value,
                name:document.getElementById("name").value,
                address:document.getElementById("address").value,
                addressType:document.getElementById("addressType").value,
                etype:eee,
                longitude:document.getElementById("longitude").value,
                latitude:document.getElementById("latitude").value,
                summary:document.getElementById("summary").value,
                distinctive:document.getElementById("distinctive").value,
                username:document.getElementById("username").value,
                phonetype:document.getElementById("phonetype").value,
                userphone:document.getElementById("userphone").value,
                townsname:document.getElementById("townsname").value,
                townsphone:document.getElementById("townsphone").value,
                report:document.getElementById("report").value,
                unit:document.getElementById("unit").value,
            };
            console.log(array);

            $.ajax({
                url: "http://47.105.208.60:8080/wechat-api/api/updateAtlasById",
                //url:"/api/updateAtlasById",
                data:
                    JSON.stringify(array),
//                    JSON.stringify($('#index').serializeJSON()),
                type: 'POST',
                dataType: "json",
                contentType:"application/json",
                success : function(data) {
                    console.log("+++++++++")
                    console.log(data)
                    alert("提交成功")
                    document.getElementById("index").reset();

                    window.location.href="managementinfo.html";

                },error: function(err){
                    console.log("----------")
                    console.log(err)
                    alert("提交失败")
                }
            });
        }
    </script>

    <script>
        //选择单选框实时将内容添加到input文本框

        $("input[type='checkbox']").change(function(){
            console.log(11111);
            var result="";
            $("input[name='etype']:checked").each(function(){
                result+=$(this).val()+'、';
            });
            if(result!=""){
                result=result.substring(0,result.indexOf ('、'));
            }
            $("#addressType").val(result);
        });
    </script>

</head>
<body>

<div class="isAll">
    <div class="divForm">

        <form id="index" onsubmit="return false" action="##" method="post" class="form1">
            <h3 style="align-content: center">地理信息修改页面</h3>

            <label>
                <input type="text" name="id" class="id" id="id" style="display: none">
            </label>
            <label>
                <span>地点编号: </span>
                <input type="text" name="num" class="num" id="num">
            </label>
            <label>
                <span>地点名称:</span>
                <input type="text" name="name" class="name" id="name">
            </label>
            <label>
                <span>详细地址:</span>
                <input type="text" name="address" class="address" id="address">
            </label>
            <label>
                <span style="display: none">地点类型:</span>
                <input type="text" name="addressType" class="addressType" id="addressType" style="display: none">
            </label>
            <label>
                <span>请选择一个地点类型作为小程序页面展示:</span>
                <input type="checkbox" name="etype" value="游客接待服务中心" id="etype1">游客接待服务中心
                <input type="checkbox" name="etype" value="风景点" id="etype2">风景点
                <input type="checkbox" name="etype" value="骑行道" id="etype3">骑行道
                <input type="checkbox" name="etype" value="登山道" id="etype4">登山道<br>
                <input type="checkbox" name="etype" value="特色水果采摘区" id="etype5">特色水果采摘区
                <input type="checkbox" name="etype" value="特色摄影点" id="etype6">特色摄影点
                <input type="checkbox" name="etype" value="民宿" id="etype7">民宿
                <input type="checkbox" name="etype" value="特色农产品销售点" id="etype8">特色农产品销售点<br>
                <input type="checkbox" name="etype" value="公共厕所" id="etype9">公共厕所
                <input type="checkbox" name="etype" value="驿站" id="etype10">驿站
                <input type="checkbox" name="etype" value="停车场" id="etype11">停车场
                <input type="checkbox" name="etype" value="乡镇人民政府" id="etype12">乡镇人民政府<br>
                <input type="checkbox" name="etype" value="村委会" id="etype13">村委会
                <input type="checkbox" name="etype" value="田园餐桌" id="etype14">田园餐桌<br>
            </label><br>
            <label>
                <span>经度:</span>
                <input type="text" name="longitude" class="longitude" id="longitude"readonly>
            </label>
            <label>
                <span>纬度:</span>
                <input type="text" name="latitude" class="latitude" id="latitude" readonly>
            </label>

            <label>
                <span>简介:</span>
                <input type="text" name="summary" class="summary" id="summary">
            </label>
            <label>
                <span>乡镇特色: </span>
                <input type="text" name="distinctive" class="distinctive" id="distinctive">
            </label>

            <label>
                <span>联系人: </span>
                <input type="text" name="username" class="username" id="username">
            </label>
            <label>
                <span>联系电话类型:</span>
                <input type="text" name="phonetype" class="phonetype" id="phonetype">
            </label>
            <label>
                <span>联系电话:</span>
                <input type="number" name="userphone" class="userphone" id="userphone">
            </label>
            <label>
                <span>乡镇联系人: </span>
                <input type="text" name="townsname" class="townsname" id="townsname">
            </label>
            <label>
                <span>乡镇联系电话:</span>
                <input type="number" name="townsphone" class="townsphone" id="townsphone">
            </label>
            <label>
                <span>上报人:</span>
                <input type="text" name="report" class="report" id="report">
            </label>
            <label>
                <span>上报单位:</span>
                <input type="text" name="unit" class="unit" id="unit">
            </label>
            <input id="look"  type="button" class="button" value="预览" onclick="yulan1()">&nbsp;&nbsp;&nbsp;
            <input  type="button" class="button" value="保存" onclick="baocun1()">&nbsp;&nbsp;&nbsp;

        </form>

    </div>
    <div class="divLook" id="divLook" style="display: none">
        <div class="divtitle" id="title" style=""></div>
        <div id="content">
            <label class="contTitle">详细地址&nbsp;:</label><br>
            <div id="conAddr" class="cont"></div>
            <div class="contTitle conPhoneType" id="conPhoneType">
            </div>
            <div id="conPhone" class="conPhone">
            </div>
            <div class="contTitle">简介&nbsp;:</div>
            <div id="conSummary" class="conSummary">
            </div>
            <div class="divFoot">
                <div class="divLeft">取消</div>
                <div class="divRight">导航</div>
            </div>
        </div>
    </div>
    <!--<div></div>-->
</div>

</body>
</html>